<template>
  <div class="tabs-container">
    <el-card shadow="hover" class="tabs-card">
      <div class="tab-item" v-if="!isMobile">
        <el-button @click="handleTabClick('全部记录')" :type="activeTab === '全部记录' ? 'primary' : 'default'" v-if="tabList[0].label !== '添加新纪录'" >全部记录</el-button>
        <el-button 
          :type="item.label == '添加新纪录'? 'primary' : item.label === activeTab ? 'primary' : 'default'" 
          v-for="(item, index) in buttonItems" 
          :key="index" 
          @click="handleTabClick(item.label)" 
        >{{ item.label }}</el-button>
        <el-select v-model="selectValuesTitle" v-for="(item, index) in selectItems" :key="index" placeholder="请选择类型" @change="handleSelectChange">
          <el-option  v-for="itemI in  item.optionsList" :key="itemI.id" :label="itemI.title" :value="itemI.title" />
        </el-select>
      </div>
      <div class="tab-item-mobile" v-else>
        <el-dropdown trigger="click" hide-on-click="false">
          <el-button type="primary">
            下拉菜单<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in tabList" :key="index"  @click.stop>
                <el-button 
                  :type="item.label === activeTab ? 'primary' : 'default'" 
                  v-if="item.type === 'button'"  
                  @click.stop="handleTabClick(item)"
                >{{ item.label }}</el-button>
                <el-select v-model="selectValues[index-1]" 
                @click.stop
                :popper-append-to-body="true" 
                 v-else>
                  <el-option v-for="itemI in item.optionsList" :key="itemI.value" :label="itemI.label"
                    :value="itemI.value" />
                </el-select>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="请输入内容"  prefix-icon="Search" />
    </el-card>
  </div>
</template>

<script setup>
import { ElCard, ElLink } from "element-plus";
import "element-plus/dist/index.css";
import { defineProps, computed, ref, onMounted, onUnmounted } from "vue";
import { useStore } from "@/store";
const store = useStore();

const props = defineProps({
  tabList: {
    type: Array,
    default: () => []
  },
  // 添加新的prop来接收外部传入的值
  selectedValue: {
    type: String,
    default: ''
  }
});

// 发出事件
const emit = defineEmits(['tab-click', 'add-record-click', 'select-change']);

// 状态管理
const isMobile = ref(false);
const activeTab = ref('全部记录');
const input1 = ref('');

// 检测设备类型
const checkDeviceType = () => {
  const width = window.innerWidth;
  isMobile.value = width < 768; // 768px为断点
};

// 处理tab点击事件
const handleTabClick = (item) => {
  if (item == '添加新纪录') {
    // 检查当前学期是否可操作
    if (!isCurrentSemesterOperable.value) {
      // 不可操作，提示用户
      ElMessage({
        message: '当前学期不可操作，无法添加新纪录',
        type: 'warning'
      });
      return;
    }
  }

  activeTab.value = item;
  // 发出事件
  emit('tab-click', item);
  // 如果是添加新纪录按钮，发出特定事件
  if (item === '添加新纪录') {
    emit('add-record-click');
  }
};

// 添加计算属性，判断当前选择的学期是否可操作
let isCurrentSemesterOperable = computed(() => {
  // 从store中获取当前选择的学期id
  const semesterId = store.record.semesterid;
  return store.settings.isSemesterOperable(semesterId)
})

// 添加计算属性来过滤按钮类型的项
const buttonItems = computed(() => {
  return props.tabList.filter(item => item.type === 'button');
});

// 添加计算属性来过滤选择器类型的项
const selectItems = computed(() => {
  return props.tabList.filter(item => item.type === 'select');
});

// 绑定的v-model值
const selectValues = ref([]);
const selectValuesTitle = ref('');

const handleSelectChange = (value) => {
  // 发出事件
  emit('select-change', value);
}
// 添加watch来监听prop的变化
watch(
  () => props.selectedValue,
  (newValue) => {
    if (newValue) {
      selectValuesTitle.value = newValue;
    }
  },
  { immediate: true } // 立即执行一次
);

// 清理
onUnmounted(() => {
  window.removeEventListener('resize', checkDeviceType);
});

// 初始化默认值：为每个select设置第一个option为默认值
onMounted(() => {
  checkDeviceType();
  window.addEventListener('resize', checkDeviceType);
});
</script>

<style scoped lang="scss">
.tabs-container {
  .tabs-card {
    padding: 10px;
    border-radius: 10px;
    ::v-deep .el-card__body {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-radius: 10px;
      background-color: #ffffff;
      border: 0;

      .tab-item {
        flex: 1;
        display: flex;
        align-items: center;
        .el-button,
        .el-select {
          width: 125px;
          height: 32px;
          margin-right: 10px;
        }
        .el-button{
          border-radius: 5px;
        }
      }

      .el-input {
        width: 300px;
      }
    }
  }
}

</style>
